import React from 'react';
import { Settings, AlertTriangle } from 'lucide-react';
import type { ComplianceItem } from '@/types/work';
import { RiskLevel } from '@/types/work';

interface RiskListProps {
  risks: ComplianceItem[];
  onManageAssociations: (risk: ComplianceItem) => void;
}

/**
 * 风险列表组件
 * 在列表视图中显示风险项及其关联信息
 */
const RiskList: React.FC<RiskListProps> = ({
  risks,
  onManageAssociations
}) => {
  // 根据风险等级获取对应的颜色和标签
  const getRiskLevelInfo = (level?: RiskLevel) => {
    switch (level) {
      case RiskLevel.HIGH:
        return { color: 'bg-red-500', label: '高风险' };
      case RiskLevel.MEDIUM:
        return { color: 'bg-amber-500', label: '中风险' };
      case RiskLevel.LOW:
        return { color: 'bg-green-500', label: '低风险' };
      default:
        return { color: 'bg-gray-500', label: '未定义' };
    }
  };
  

  
  // 如果没有风险项，显示空状态
  if (risks.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
        <AlertTriangle className="h-12 w-12 mb-4" />
        <p className="text-lg font-medium">未找到符合条件的风险项</p>
        <p className="text-sm mt-2">请尝试调整筛选条件或添加新的风险项</p>
      </div>
    );
  }
  
  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse">
        <thead>
          <tr className="bg-muted/50">
            <th className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">风险项</th>
            <th className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">风险等级</th>
            <th className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">关联保障项</th>
            <th className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">操作</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-border">
          {risks.map(risk => {
            const riskLevelInfo = getRiskLevelInfo(risk.risk_level);
            const relatedCount = risk.related_guarantees?.length || 0;
            
            return (
              <tr key={risk.id} className="hover:bg-muted/30 transition-colors">
                <td className="px-4 py-3">
                  <div>
                    <p className="font-medium text-foreground">{risk.title}</p>
                    <p className="text-sm text-muted-foreground line-clamp-1">{risk.description}</p>
                  </div>
                </td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-2">
                    <div className={`w-2.5 h-2.5 rounded-full ${riskLevelInfo.color}`} />
                    <span className="text-sm">{riskLevelInfo.label}</span>
                  </div>
                </td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-1">
                    <span className="text-sm font-medium">{relatedCount}</span>
                  </div>
                </td>
                <td className="px-4 py-3">
                  <button
                    onClick={() => onManageAssociations(risk)}
                    className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-primary/10 text-primary hover:bg-primary/20 transition-colors text-sm"
                  >
                    <Settings className="h-3.5 w-3.5" />
                    <span>管理关联</span>
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default RiskList;
